/* the feature that is going to be helpful: display: inline-block (for having elements sid by side each with their own box) and display: block (this will put a line break and stack the elements) */


* {
	box-sizing: border-box;
}
html {
	font-size: 16px;
}
body {
	background-color: #e7e7e7
}
.banner {
	text-align: center;
	background-color:#41836e;
	font-family:'Rakkas', cursive;
	width:100%;
	padding-top:0;
	

}
.text {
	line-height:1.4;
	font-family: 'Work Sans', sans-serif;
	width: 90%;
}

.principle {
	
	text-align: center;
font-family: 'Tajawal', cursive;	

}
ol a {
	color: #283346;
}
table.navi {
	margin-left: auto;
	margin-right: auto;
	font-family: 'Tajawal', cursive;	
}
.navi td {
	
	padding-left: 10px;
	padding-right:10px;

	color:#C70039;
}

.navi h5 a {
	color:#C70039;
}
#لو {
	font-family: 'Tajawal', cursive;
}
#regular .bold {
	font-family:'Work Sans', sans-serif;
}

.arabic {
	font-family: 'Tajawal', cursive;
	font-weight:30px;
}
table.examples {
	width:90%;
	border: solid thin black;
	
}
.examples td.text, td.arabic {
	border:solid thin black;
	padding-left: 10px;
	padding-right:10px;
	
	text-align:center;
	padding-top:10px;
	padding-bottom:10px;
}
.drill td.sentence {
	padding-top:10px;
	padding-bottom:10px;
	padding-right:5px;
	padding-left:5px;
	text-align:right;
	font-size: 2rem;
}
.drill_answer td.sentence {
	padding-top:10px;
	padding-bottom:10px;
	padding-right:10px;
	padding-left:30px;
	text-align:right;
	font-size: 2rem;
}
.drill_answer td.number {
	padding-top:10px;
	padding-bottom:10px;
	padding-left:50px;
	text-align:right;
	font-size: 2rem;
}
.drill_answer td.translation {
	padding-top:10px;
	padding-bottom:10px;
	padding-left:15px;
	text-align:left;
	font-size: 1.5rem;
}
.drill td.eng{
	text-align:right;
}
	
.examples td.arabic_new {
	border:solid thin black;
	padding-left: 10px;
	padding-right:10px;
	font-family: 'Tajawal', cursive;
	
	text-align:right;
	padding-top:10px;
	padding-bottom:10px;
}
.examples td.text_new {
	border:solid thin black;
	padding-left: 10px;
	padding-right:10px;
	
	text-align:left;
	padding-top:10px;
	padding-bottom:10px;
}
.focus {
	color:#ff5a5f;
}
.bold {
	font-weight: bold;
}
h3.sub_head {
	font-weight:bold;
}
.character {
color:#1e90ff;
}
table.exampleslong {
	width:1000px;
	border: solid thin black;
	
}
.exampleslong td {
	border:solid thin black;
	padding-left: 10px;
	padding-right:10px;
	color:black;
	
}
.arabiclong {
	text-align:right;
	font-family: 'Tajawal', cursive;
	
}
.examp {
	padding-left:300px;
}
.englishlong {
	text-align:left;
	padding-top:10px;
	padding-bottom:10px;
	font-family: 'Work Sans', sans-serif;
}
.right {
	float:right;
}

.translation {
	font-style: italic;
}
ul {
	line-height:1.4;
	font-weight: normal;
}
.book_title {
	font-style: italic;
}
.notes {
	text-align: center;
}
.index {
	font-family: 'Work Sans', sans-serif;
}
.then_state {
	color:#2e8b57;
}
.main_verb {
	color:#9400d3;
}
table.index {
	border: dotted 3px #41836e;
	border-radius: 20px;
	padding: 10px;
	padding-left: 25px;
	padding-right: 25px;
}
.paragraph {
	padding-left: 30px;
	padding-right: 30px;
}
.tableaux {
	padding-left: 30px;
	padding-right: 30px;
	
}
h2.text{
	margin-bottom: 50px;
}
.topper {
	margin: 0 auto;
	border: 3px dotted #41836e;
	width: 300px;
	border-radius:40px;
	line-height:0.9;
	padding: 3px 10px;
	
}

.except_list {
	
	position: relative;
	left:30px;
	text-align:center;
	width:100px;

}
.except_list h3.text {
line-height: 2.0;

}	
.subsection {
	border:3px dotted #41836e;
	width: 35%;
	border-radius:50px;
	padding-left: 15px;
	padding-right:15px;
	text-align: center;
	font-family: 'Work Sans', sans-serif;
	margin: 40px 40px 40px 40px;

}
.intro span {
	display: block;
	margin-bottom: 10px;
	padding:5px 40px;
}
h3 {
	
	
}
.prose {
	margin:10px 40px;
	line-height: 1.4;
}
.attention {
	line-height:1.4;
	font-family: 'Work Sans', sans-serif;
	padding-left: 25px;
}
h2.section_head {
	line-height:1.4;
	font-family: 'Work Sans', sans-serif;
	padding-left: 25px;
}
.script {
	font-family: 'Tajawal', cursive;
	text-align: left;
	position:relative;
	right:20px;
	width: 80%;
	margin-left: 50px;
	font-weight:normal;
	font-size: 1.5rem;
	margin-bottom: 30px;
	
}
.side {
	position:fixed;
	z-index: 10;
	float:left;
	border-right:solid #41836e 0.5px;
	height:420px;
	top:75px;
	width:7%;
	margin-right:3px;
	padding-right:20px;
	overflow: hide;
	
}
.nav {
	display:block;
	font-family: 'Tajawal', cursive;
	text-align:right;
	margin-bottom:15px;
	margin-right: 5px;
	
}
.big-boy {
	position:relative;
	left:75px;
	margin:10px 50px;
	
	
}

.drill {
	font-family: 'Tajawal', cursive;
	
	padding-left: 300px;
	padding-right: 10px;
	font-size:2rem;
}

.drill td{
	padding-left:30px;
}

.drill_answer {
	font-family: 'Tajawal', cursive;
	
	padding-left: 50px;
	padding-right: 10px;
}
	
	
.toc {
	font-family: 'Work Sans', sans-serif;
	width:50%;
	
	
}
.toc dd h5 {
	font-weight: normal;
	margin-top: 5px;
	margin-bottom:5px;
}
.toc dt h4 {
	margin-top: 10px;
	margin-bottom: 5px;
}
.sect {
	font-family: 'Work Sans', sans-serif;
	margin-top:50px;
	color: #41836e;
}
.media_buttons {
	
	width:90%;
	display:flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-content: space-around;
	
}

.movie {
	
	
	margin-left: 7rem;
	margin-top: 1rem;
	width:100px;
	flex-grow: 2;
	
	
}
.movie a {
	font-size: 120%;
	font-family: 'Work Sans', sans-serif;
}
.audio{
	flex-shrink: 1;
	
	
}


.ex {
	display: block;
	font-family: 'Work Sans', sans-serif;
	margin: 0 0 5px 20px;
}

.content{
	
	font-family: 'Work Sans', sans-serif;
	width: 90%;
}

.content p.content_text {
	line-height:1.8;
	
}

 

	
 video {
	max-width: 100%;
	height: auto;
	display: block;
}

@media only screen and (max-width:600px) {
	.side {
		border-right: none;
		
	}
}